<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="maqettadocs.css" />
<title>Tutorial 13 - Mobile Sketching</title>
</head>
<body class="maqettadocs">

<div id="pagebody">

<table class="breadcrumbs noprint"><tr>
	<td> &nbsp; </td>
    <td class="prevnext">
	<a href="tutorials/App_States_Part_2.html">Previous</a> / <a href="tutorials/Mobile_Theme_Editor.html">Next</a>
    </td></tr>
</table>

<h1>Tutorial 13 - Mobile Sketching</h1>

<div class='note'>
	When going through Maqetta's tutorials, it is suggested that you have two side-by-side
	browser windows open, one showing the tutorial, and the other where you run the application
	and perform the steps listed in the tutorial.<br/>
	<img src='img/SideBySideTutorialsApp.png' class='side_by_side'/>
</div>

<a name="about_this_tutorial"><h2>About this tutorial</h2></a>

<p>This tutorial introduces various features in Maqetta that allow for quick sketching of mobile user interfaces.
The sketching features are often useful in the early stages of designing a user interface when
you want to create a visual mockup quickly and solicit early feedback from colleagues and customers.</p>

<p class='note'>Before running this tutorial, be sure to first go through the more general "Quick UI Sketching" tutorial.
That tutorial introduces the various sketching features found in Maqetta. This tutorial supplements 
the "Quick UI Sketching" tutorial with some features and techniques specific to mobile UI sketching.</p>

<a name="mobile_composition_vs_mobile_sketching"><h2>Mobile composition vs mobile sketching</h2></a>

<p>In the previous tutorial, "Tutorial - Mobile User Interfaces", you learned how to use Maqetta's drag/drop authoring
features to visually compose an actual running mobile application, all within a life-size replica of the target device
(e.g., silhouette of an iPhone). This tutorial shows how to use an alternate technique for mocking up a mobile user 
interface using Maqetta's quick UI sketching features. With these techniques, you will create a WYSIWYG drawing of
a proposed user interface, using actual mobile widgets, but the result will be a static image of the proposed user
interface rather than an actual working application.</p>
<p>Here are some advantages/disadvantages between mobile visual
composition and mobile sketching:</p>
<ul>
<li>Mobile visual composition:
	<ul>
		<li>Pro: Because you are creating an actual running mobile application, you will end up much further along
			the path towards delivering a production application.</li>
		<li>Pro: Users can actually run the application and therefore test out the application's interactivity either
			either in Maqetta's desktop previewer (where the application runs within a life-size device silhouette) or
			actually try out the application on target devices.</li>
		<li>Con: Users sometimes have to ascend some HTML and CSS learning curves</li>
		<li>Con: In many cases, it takes more time to build a mobile composition than a mobile sketch.</li>
	</ul>
</li>
<li>Mobile sketching:
	<ul>
		<li>Pro: You can usually create mobile UI mockups quickly (in minutes).</li>
		<li>Pro: Low learning curve.</li>
		<li>Con: The result is just a picture of an application, not an actual running application.</li>
		<li>Con: Viewing the mobile UI mockup on the actual device won't be particularly useful.</li>
	</ul>
</li>
</ul> 

<p>The steps below introduce mobile sketching.</p>

<a name="choose_device_clipart"><h2>Choosing device clipart</h2></a>

<p></p>
<ul>
<li><p>Go to the Create menu at the top of the application, and issue a "Create Sketch (high-fidelity)" command.
	You can either accept the default filename
	(e.g., <code>file1.html</code>) or enter a custom filename. Click on the Create button.</li>

<p>In the <b>Palette</b>, open up the <b>Clip Art</b> section of the Widgets palette,
then click on <b>Device Silhouttes</b> to open the <b>Device Silhouttes</b> subsection. You should see
various clip art entries for mobile devices (e.g., Android_340x480, Android_480x800, AndroidTablet, Blackberry, iPad, iPhone).
</p>
<p><a href="img/widgets_clipart_devices.png" target="_blank"><img alt="image" src="img/widgets_clipart_devices.png" style="margin: 1em 1em 0pt 0pt;" width="250" /></a></p>	

<p>Drag/drop a iPhone clip art widget onto the page canvas,
	dropping it near the top/left corner of the canvas.
	Your canvas should now look like this:
</p>
<p><a href="img/iphone_clipart_added.png" target="_blank"><img alt="image" src="img/iphone_clipart_added.png" style="margin: 1em 1em 0pt 0pt;" height="500" /></a></p>	

<a name="adding_heading"><h2>Adding a Heading widget</h2></a>

<p>In the <b>Palette</b>, open up the "Heading" section and then drag/drop a Heading widget into the picture of the iPhone. Attempt to drop the widget
	at the top/left corner of the inner rectangle of the iPhone clip art widget. 
	When the prompt appears for the Heading widget's text, enter ""Mobile UI Sketch".</p>

<p><a href="img/mobile_sketching_heading_added.png" target="_blank"><img alt="image" src="img/mobile_sketching_heading_added.png" style="margin: 1em 1em 0pt 0pt;" height="450" /></a></p>	

<p>Click/drag on the interior of the Heading widget to move it so that it is repositioned such that
	its top/left corner is exactly aligned with the
	top/left corner corner of the inner rectangle of the iPhone clip art widget.
	You might want to first move the Heading down and to the right so that you can see where the top/left inner corner
	is and then move the Heading back into alignment with the top/left inner corner.
</p>
<p class='note'>You can also use the arrow keys to move widgets one pixel in a particular direction.
	You can also go to the Layout section of the Properties palette to adjust the 'left' and 'top' properties there.
	The "+" and "-" icons can be convenient for pixel tweaking operations.</p>
	
<p>Once the top/left corner is in the right location, now drag the right edge of the Heading widget to the right
	until the right edge of the Heading widget is exactly aligned with the right edge of the iPhone's inner rectangle.</p>
<p class='note'>You can also go to the Layout section of the Properties palette to adjust the 'width' property there.
	The "+" and "-" icons can be convenient for pixel tweaking operations.</p>
<p>Your canvas should now look like this:
</p>
<p><a href="img/mobile_sketching_heading_adjusted.png" target="_blank"><img alt="image" src="img/mobile_sketching_heading_adjusted.png" style="margin: 1em 1em 0pt 0pt;" height="250" /></a></p>	

<p class='note'>If you check the Outline palette, you will see that the Heading is a child of the device clip art widget, and
therefore positioned "absolutely, but relative to its parent". In other words, the Heading is at a fixed (x,y) location
relative to the top/left of its parent widget (i.e., the device clip art widget). What this means is that if you move
the device clip art widget, the Heading will move along with it.</p>

<a name="adding_heading"><h2>Adding a RoundRectList widget and a TabBar widget</h2></a>

<p>Drag/drop a RoundRectList widget (found in the <b>Lists</b> section of the <b>Palette</b>)
into the picture of the iPhone below the Heading widget. 
	When the prompt appears, type in 4 lines of text:
	<pre>Active
Pending
Approved
Deleted</pre>
</p>
<p>With the RoundRectList widget selected, drag it to a position such that it is directly under the Heading
	and centered horizontally within the iPhone's inner rectangle.</p>
<div class='note'>If you click on a RoundRectList in an attempt to select it, you might find that one of the ListItem child widgets
has been selected instead of the RoundRectList container widget. In this case, to select the RoundRectList container widget,
you can use either of these options:
<ul>
	<li>Select one of the child ListItem widgets, then bring up the context menu (right mouse button on a multi-button mouse)
		and choose the "Select parent" command.</li>
	<li>Go to the Outline palette and find the RoundRectList widget there, and click on it in the Outline palette
		to select it. </li>
	<li>You might also be able to select the RoundRectList container widget by carefully clicking on its border
		(versus clicking on its interior). </li>
</ul>
</div>
<p>Drag/drop a TabBar widget (found in the <b>ToolBars, ButtonBars</b> subsection of the <b>Controls</b> section of the <b>Palette</b>)
 into the picture of the iPhone and drop near the bottom of the iPhone's inner rectangle.
	When the prompt appears, type in this text:
	<pre>Tasks, Alerts, Messages</pre>
</p>
<p>With the TabBar widget selected, drag it to a position such that its bottom-left corner is exactly aligned
with the bottom-left corner of the iPhone's inner rectangle.</p>
<p>With the TabBar widget selected, drag on the right edge of the TabBar so that the right edge of the TabBar 
is exactly aligned with the right edge of the iPhone's inner rectangle.</p>

<p>Your canvas should now look like this:</p>
<p><a href="img/mobile_sketching_complete.png" target="_blank"><img alt="image" src="img/mobile_sketching_complete.png" style="margin: 1em 1em 0pt 0pt;" height="450" /></a></p>	

<p>Your mobile sketch is now complete.</p>

<a name="mobile_sketching_notes"><h2>Landscape sketching</h2></a>

<p>The device clipart widgets (e.g., Android_340x480, Android_480x800, AndroidTablet, Blackberry, iPad, iPhone)
can be changed to landscape orientation if you need to do quick mobile UI sketching for how user interfaces 
will look in landscape mode. To do so, select the clipart widget on the canvas, then go to the Widget-Specific
section of the Properties palette. You can then change the value of the 'Orientation' property of 
the given device clipart widget to 'landscape'. But if you do this, only that one widget will change its orientation.
Any other widgets that might have been added to the page will not automatically reposition and resize themselves
because Maqetta is in quick sketching mode. (Note: if instead of quick UI sketching, you had composed an actual mobile page
in Maqetta, the child widgets would indeed automatically reposition and resize themselves.)
</p>


<p class="prevnext"><a href="tutorials/App_States_Part_2.html">Previous</a> / <a href="tutorials/Mobile_Theme_Editor.html">Next</a></p>

</div> <!-- pagebody -->

</body>
</html>
